<template>
  <div class="main-page">
    <div class="main-01">
      <div class="main-tab-01-01">
        <div class="main-tab-title">
          <span>幼儿材料互动记录</span>
        </div>
        <div class="filter-section">
          <label for="classFilter">班级:</label>
          <select v-model="selectedClass" id="classFilter" @change="filterStudents">
            <option value="">所有班级</option>
            <option v-for="cls in classList" :key="cls.id" :value="cls.id">{{ cls.class_name }}</option>
          </select>
          <label for="studentFilter">学生:</label>
          <select v-model="selectedStudent" id="studentFilter">
            <option value="">所有学生</option>
            <option v-for="student in filteredStudents" :key="student.id" :value="student.id">{{ student.name }}</option>
          </select>
        </div>
        <div class="table-container">
          <table class="attendance-table">
            <thead>
              <tr>
                <th>学生</th>
                <th>意向（种）</th>
                <th>记录（次）</th>
                <th>认知数</th>
                <th>使用</th>
                <th>运用</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="student in students" :key="student.id" @click="showStudentMaterials(student.id)">
                <td>{{ student.name }}</td>
                <td>{{ student.intention_count }}</td>
                <td>{{ student.record_count }}</td>
                <td>{{ student.cognition_count }}</td>
                <td>{{ student.usage_count }}</td>
                <td>{{ student.application_count }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="main-02">
      <div class="main-02-top">
        <div class="main-tab-title" style="margin-bottom: 0">
          <span>区域材料互动排行榜</span>
        </div>
        <div class="table-container">
          <table class="attendance-table">
            <thead>
              <tr>
                <th>主题名称</th>
                <th>使用次数</th>
                <th>平均水平</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="stat in cornerMaterialStatistics" :key="stat.corner_id">
                <td>{{ stat.theme_name }}</td>
                <td @click="showThemeMaterials(stat.corner_id)">{{ stat.usage_count }}</td>
                <td>{{ stat.most_frequent_level }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="main-03">
      <div class="main-tab-01-01">
        <div class="main-tab-title">
          <span>材料互动排行榜</span>
        </div>
        <div class="table-container">
          <table class="attendance-table">
            <thead>
              <tr>
                <th>材料名称</th>
                <th>记录次数</th>
                <th>认知数</th>
                <th>使用次数</th>
                <th>运用次数</th>
                <th>意向次数</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="ranking in materialInteractionRankingData" :key="ranking.material_id">
                <td @click="showMaterialStudents(ranking.material_id)">{{ ranking.material_name }}</td>
                <td>{{ ranking.record_count }}</td>
                <td>{{ ranking.cognition_count }}</td>
                <td>{{ ranking.usage_count }}</td>
                <td>{{ ranking.application_count }}</td>
                <td>{{ ranking.intention_count }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!-- 弹窗部分 -->
    <el-dialog :visible.sync="dialogVisible" title="学生材料互动统计" width="60%" :modal="false">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="记录材料" name="recorded">
          <el-row :gutter="20">
            <el-col :span="8" v-for="material in studentMaterialsData.recorded_materials" :key="material.id">
              <div class="material-item">
                <img v-if="material.pic" :src="material.pic" alt="Material Image" class="material-image">
                <div class="material-name">{{ material.name }}</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="意向材料" name="intention">
          <el-row :gutter="20">
            <el-col :span="8" v-for="material in studentMaterialsData.intention_materials" :key="material.id">
              <div class="material-item">
                <img v-if="material.pic" :src="material.pic" alt="Material Image" class="material-image">
                <div class="material-name">{{ material.name }}</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="认知材料" name="cognition">
          <el-row :gutter="20">
            <el-col :span="8" v-for="material in studentMaterialsData.cognition_materials" :key="material.id">
              <div class="material-item">
                <img v-if="material.pic" :src="material.pic" alt="Material Image" class="material-image">
                <div class="material-name">{{ material.name }}</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="使用材料" name="usage">
          <el-row :gutter="20">
            <el-col :span="8" v-for="material in studentMaterialsData.usage_materials" :key="material.id">
              <div class="material-item">
                <img v-if="material.pic" :src="material.pic" alt="Material Image" class="material-image">
                <div class="material-name">{{ material.name }}</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="运用材料" name="application">
          <el-row :gutter="20">
            <el-col :span="8" v-for="material in studentMaterialsData.application_materials" :key="material.id">
              <div class="material-item">
                <img v-if="material.pic" :src="material.pic" alt="Material Image" class="material-image">
                <div class="material-name">{{ material.name }}</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- 主题材料弹窗部分 -->
    <el-dialog :visible.sync="themeDialogVisible" title="主题材料" width="60%" :modal="false">
      <el-tabs v-model="themeActiveTab">
        <el-tab-pane label="记录材料" name="recorded">
          <el-row :gutter="20">
            <el-col :span="8" v-for="material in themeMaterialsData.recorded_materials" :key="material.material_id">
              <div class="material-item">
                <img v-if="material.material_pic" :src="material.material_pic" alt="Material Image" class="material-image">
                <div class="material-name">{{ material.material_name }}</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="意向材料" name="intention">
          <el-row :gutter="20">
            <el-col :span="8" v-for="material in themeMaterialsData.intention_materials" :key="material.material_id">
              <div class="material-item">
                <img v-if="material.material_pic" :src="material.material_pic" alt="Material Image" class="material-image">
                <div class="material-name">{{ material.material_name }}</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="认知材料" name="cognition">
          <el-row :gutter="20">
            <el-col :span="8" v-for="material in themeMaterialsData.cognition_materials" :key="material.material_id">
              <div class="material-item">
                <img v-if="material.material_pic" :src="material.material_pic" alt="Material Image" class="material-image">
                <div class="material-name">{{ material.material_name }}</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="使用材料" name="usage">
          <el-row :gutter="20">
            <el-col :span="8" v-for="material in themeMaterialsData.usage_materials" :key="material.material_id">
              <div class="material-item">
                <img v-if="material.material_pic" :src="material.material_pic" alt="Material Image" class="material-image">
                <div class="material-name">{{ material.material_name }}</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="运用材料" name="application">
          <el-row :gutter="20">
            <el-col :span="8" v-for="material in themeMaterialsData.application_materials" :key="material.material_id">
              <div class="material-item">
                <img v-if="material.material_pic" :src="material.material_pic" alt="Material Image" class="material-image">
                <div class="material-name">{{ material.material_name }}</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- 材料学生弹窗部分 -->
    <el-dialog :visible.sync="materialStudentsDialogVisible" title="材料学生" width="60%" :modal="false">
      <el-tabs v-model="materialStudentsActiveTab">
        <el-tab-pane label="意向学生" name="intention">
          <el-row :gutter="20">
            <el-col :span="8" v-for="student in materialStudentsData.intention_students" :key="student.id">
              <div class="student-item">
                <img v-if="student.pic" :src="student.pic" alt="student Image" class="student-image">
                <div class="student-name">{{ student.name }}</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="认知学生" name="cognition">
          <el-row :gutter="20">
            <el-col :span="8" v-for="student in materialStudentsData.cognition_students" :key="student.id">
              <div class="student-item">
                <img v-if="student.pic" :src="student.pic" alt="student Image" class="student-image">
                <div class="student-name">{{ student.name }}</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="使用学生" name="usage">
          <el-row :gutter="20">
            <el-col :span="8" v-for="student in materialStudentsData.usage_students" :key="student.id">
              <div class="student-item">
                <img v-if="student.pic" :src="student.pic" alt="student Image" class="student-image">
                <div class="student-name">{{ student.name }}</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="运用学生" name="application">
          <el-row :gutter="20">
            <el-col :span="8" v-for="student in materialStudentsData.application_students" :key="student.id">
              <div class="student-item">
                <img v-if="student.pic" :src="student.pic" alt="student Image" class="student-image">
                <div class="student-name">{{ student.name }}</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import {
  cornerStudentStatics,
  cornerMaterialStatisticsByCriteria,
  cornerMaterialInteractionRanking,
  studentMaterials,
  themeMaterials,
  materialStudents // 确保导入materialStudents接口
} from "@/api/admin/school";
import developmentTable from "@/fullscreen/components/developmentTable";
import api from "@/utils/api";

export default {
  name: "home",
  components: { developmentTable },
  data() {
    return {
      selectedClass: '',
      selectedStudent: '',
      students: [],
      classList: [],
      cornerMaterialStatistics: [],
      materialInteractionRankingData: [],
      dialogVisible: false,
      activeTab: 'recorded',
      studentMaterialsData: {
        intention_materials: [],
        recorded_materials: [],
        cognition_materials: [],
        usage_materials: [],
        application_materials: []
      },
      selectedStudentId: null,
      themeMaterialsData: [],
      themeDialogVisible: false,
      materialStudentsData: [], // 存储materialStudents接口返回的数据
      materialStudentsDialogVisible: false, // 控制materialStudents弹窗的显示
    };
  },
  computed: {
    filteredStudents() {
      if (this.selectedStudent) {
        return this.students.filter(student => student.id === this.selectedStudent);
      }
      if (this.selectedClass) {
        return this.students.filter(student => student.class_id === this.selectedClass);
      }
      return this.students;
    }
  },
  created() {
    this.getSchoolFn();
    this.getCornerMaterialStatistics();
    this.getMaterialInteractionRanking();
    this.classWatchInitFn(); // 初始化班级数据
  },
  methods: {
    getSchoolFn() {
      cornerStudentStatics({ class_id: this.selectedClass }).then(res => {
        if (res.code == 0) {
          this.students = res.data.map(student => ({
            id: student.student_id,
            name: student.name,
            class_id: student.class_id,
            intention_count: student.intention_count,
            record_count: student.record_count,
            cognition_count: student.cognition_count,
            usage_count: student.usage_count,
            application_count: student.application_count
          }));
        }
        console.log(res, '幼儿材料互动记录返回的');
      }).catch(err => {
        console.error('获取学生数据失败:', err);
      });
    },
    getCornerMaterialStatistics() {
      cornerMaterialStatisticsByCriteria().then(res => {
        if (res.code == 0) {
          this.cornerMaterialStatistics = res.data;
        }
        console.log(res, '区域材料互动排行榜返回的');
      }).catch(err => {
        console.error('获取区域材料互动排行榜数据失败:', err);
      });
    },
    getMaterialInteractionRanking() {
      cornerMaterialInteractionRanking().then(res => {
        if (res.code == 0) {
          this.materialInteractionRankingData = res.data;
        }
        console.log(res, '材料互动排行榜返回的');
      }).catch(err => {
        console.error('获取材料互动排行榜数据失败:', err);
      });
    },
    filterStudents() {
      this.selectedStudent = ''; // 清空学生选择
      this.getSchoolFn(); // 重新请求学生数据
    },
    classWatchInitFn() {
      this.$fetch(api.admin_classes_index, {
        p: 1,
        is_classroom: 1
      }).then((response) => {
        this.classList = response.list.data;
        console.log(this.classList, '班级数据返回的');
      }).catch((err) => {
        console.error('获取班级数据失败:', err);
      });
    },
    showStudentMaterials(studentId) {
      this.selectedStudentId = studentId;
      this.dialogVisible = true;
      this.fetchStudentMaterials(studentId);
    },
    fetchStudentMaterials(studentId) {
      studentMaterials({ student_id: studentId }).then(res => {
        if (res.code == 0) {
          this.studentMaterialsData = res.data;
        }
        console.log(res, '学生材料互动统计返回的');
      }).catch(err => {
        console.error('获取学生材料互动统计数据失败:', err);
      });
    },
    showThemeMaterials(cornerId) {
      this.themeDialogVisible = true;
      this.fetchThemeMaterials(cornerId);
    },
    fetchThemeMaterials(cornerId) {
      themeMaterials({ corner_id: cornerId }).then(res => {
        if (res.code == 0) {
          this.themeMaterialsData = res.data;
        }
        console.log(res, '主题材料返回的');
      }).catch(err => {
        console.error('获取主题材料数据失败:', err);
      });
    },
    showMaterialStudents(materialId) {
      this.materialStudentsDialogVisible = true;
      this.fetchMaterialStudents(materialId);
    },
    fetchMaterialStudents(materialId) {
      materialStudents({ material_id: materialId }).then(res => {
        if (res.code == 0) {
          this.materialStudentsData = res.data;
        }
        console.log(res, '材料学生数据返回的');
      }).catch(err => {
        console.error('获取材料学生数据失败:', err);
      });
    },
  }
}
</script>

<style scoped>
.main-page {
  display: flex;
  height: 100vh; /* 设置为视口高度 */
  padding: 10px;
}

.main-tab-title {
  background: url(./assets/img/h-008.png) no-repeat;
  background-size: 100% 50px;
  background-position: left bottom;
  height: 50px;
  font-style: italic;
  font-size: 26px;
  padding-left: 40px;
  line-height: 24px;
  font-weight: 500;
  margin-bottom: 20px;
}

.main-tab-title span {
  background: linear-gradient(to bottom, #fff, #fcfcb8);
  -webkit-background-clip: text; /* 将背景裁剪为文字区域 */
  -webkit-text-fill-color: transparent; /* 将文字颜色设置为透明 */
}

.main-content {
  font-size: 18px;
  color: #fff;
}

.main-01, .main-02, .main-03 {
  width: 33.33%;
  background: rgba(5, 25, 53, .6);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex: 1; /* 使每个子元素高度相等 */
  overflow-y: auto; /* 添加垂直滚动条 */
}

.main-02 {
  margin: 0 20px;
}

.main-tab-01-01 {
  flex: 1; /* 使每个子元素高度相等 */
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.filter-section {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.filter-section label {
  margin-right: 10px;
  color: #fff;
}

.filter-section select {
  margin-right: 10px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
}

.table-container {
  overflow-y: auto;
  flex: 1; /* 使表格容器填充剩余空间 */
}

.attendance-table {
  width: 100%;
  border-collapse: collapse;
}

.attendance-table th,
.attendance-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center; /* 居中对齐 */
  color: white; /* 字体颜色为白色 */
}

.attendance-table th {
  background-color: #333; /* 表头背景颜色 */
}

.attendance-table td {
  color: #52ffff;
}

/* 弹窗样式 */
.el-dialog__body {
  padding: 20px;
}

.el-tabs__nav {
  margin-left: 20px;
}

.material-item {
  text-align: center;
  margin-bottom: 20px;
}

.material-image {
  width: 100%;
  max-width: 100px;
  height: auto;
  border-radius: 5px;
}

.material-name {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}

/* 额外的样式调整 */
.attendance-table tr:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.filter-section select:focus {
  outline: none;
  border-color: #409EFF;
}

.el-dialog {
  background-color: rgba(255, 255, 255, 0.95);
}

.el-dialog__header {
  background-color: #409EFF;
  color: white;
}

.el-dialog__header span {
  color: white;
}

.el-dialog__header button {
  color: white;
}
</style>
